<template>
	<view>		
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">任务详情</block>
		</cu-custom>
		<!-- 加载动画 -->
		<view class="text-gray padding justify-center flex align-center" v-if="!pageLoad" >
			<u-loading mode="circle" color="#2979ff" size="40"></u-loading>
			<view class="margin-left-sm">加载中...</view>
		</view>	
		
		<view v-if="pageLoad">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="'background-image:url('+employer.avatar+')'"></view>							 
					<view class="content flex-sub">
						<view>{{employer.nickname}}</view>
						<view class="text-gray flex justify-between">
							<view class="text-sm">上次登录：{{employer.last_login_date}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cu-card no-card margin-top">
				<view class="cu-item padding">
					<view class="text-content margin-top-sm">
						收货人:{{task.name}}
					</view>
					<view class="text-content margin-top-sm">
						收货人联系电话:{{task.phone}}
					</view>
					<view class="text-content margin-top-sm">
						收货人地址:{{task.address}}
					</view>
					<view class="text-content margin-top-sm">
						收获时间:{{task.time}}
					</view>
					<view class="text-content margin-top-sm">
						取件地址:{{task.locker}}
					</view>
					<view class="text-content margin-top-sm">
						取件号码:{{task.code}}
					</view>
					<view class="text-content margin-top-sm">
						赏金:{{task.price}}
					</view>
					<image style="width: 100%;" v-for="(item,index) in task.imgList" :key="index" :src="item.imgurl" mode="widthFix" :task-src="index"></image>
					<view class="text-gray flex justify-end">
						<view class="text-sm margin-bottom-sm">{{task.createTime}}</view>									
					</view>
				</view>
			</view>
			
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text> 已被下列用户接单
				</view>
			</view>
			<!-- 需要把workerId和coment传过去 -->
			<cmform v-if="Object.keys(task).length > 0"  :objectid="task._id"  :employerId="employer._id" :worker="worker" :task="task"></cmform>
		</view>
	</view>
</template>

<script>
	import mdate from "@/common/date.js"; 
	import cmform from "../../../components/cmform.vue";
	import { mapGetters } from 'vuex';
	export default {
		components: {
			cmform
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		data: function() {
			return {
				pageLoad: false,
				employer: {},
				worker:{},
				task: {},
				id: ""
			}
		},
		onLoad: function(ops) {
			//任务id
			this.id = ops.id;
			this.getPage();
			this.addView();
		},
		methods: {
			// 请求任务相关的数据
			async getPage() {
				await uniCloud.callFunction({
					name: "task",
					data: {
						cloudAction: "show",
						params:{
							id: this.id
						}				
					}
				}).then((res) => {
					console.log("detail是",res);
					var res = res.result.data;
					this.task = res.task;				 
					this.employer = res.employer;
					this.employer.last_login_date=new Date(this.employer.last_login_date).Format("yyyy-MM-dd hh:mm:ss");
					this.worker=res.worker;
				})
				this.pageLoad = true;			
			},
			addView() { //记录浏览次数
				var that = this;
				uniCloud.callFunction({
					name: "task",
					data: {
						cloudAction: "addView",
						params:{
							id: this.id,
						}
					}
				}).then((res) => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
